<template>
	<view class="container">
		<view v-if="!schemeMsg || !schemeMsg.length">
			<u-loading-page :loading="!schemeMsg || !schemeMsg.length" loading-text="加载中..."></u-loading-page>
		</view>
		<view v-else>

			<view class="schemeItem" v-for="(item, index) in schemeMsg" :id="'scm' + (index + 1)" :key="index"
				:style="{ '--txtColor': item.txtColor, 'position': 'relative', 'z-index': schemeMsg.length - index }">
				<view class="schemeBox" @click="onSchemeItemClick(item)">
					<view class="title">
						<div>
							<image class="title-img" :src="downloadBkPic(item.imgName+'-arrow')"></image>
						</div>
						<div class="arrow-dot" style="display: flex;" v-if="item.solutionByTypeListResponseVOS && item.solutionByTypeListResponseVOS.length > 3">
							<div  @click="changeIndex(index,'last')">
								<image class="arrow" :src="scrollData[index] == 0?'../../static/detail/disable-l.png':item.arrowIconL"></image>
							</div>
							 <span style="color: rgba(59, 56, 75, 1);">{{ (scrollData[index]+1) || 1 }} </span> <span style="padding: 0 4rpx;"> / </span> <span style="color: rgba(156, 156, 156, 1)"> {{ item.solutionByTypeListResponseVOS.length }}</span>
							 <div @click="changeIndex(index,'next')">
								<image class="arrow" :src="scrollData[index]+3>=item.solutionByTypeListResponseVOS.length?'../../static/detail/disable-r.png':item.arrowIconR"></image>
							</div>
						</div>
						<!-- <view class="openCloseBtn"
							v-if="item.solutionByTypeListResponseVOS && item.solutionByTypeListResponseVOS.length">
							<text v-if="!item.show">
								展开更多
							</text>
							<text v-else>
								收起更多
							</text>
							<image :src="item.show ? '../../static/detail/up.png' : '../../static/detail/down.png'"></image>
						</view> -->
					</view>
					<image :src="downloadBkPic(item.imgName)" mode="heightFix"></image>
				</view>
				<div :show="item.show" mode="slide-down" duration="200"
					v-if="item.solutionByTypeListResponseVOS && item.solutionByTypeListResponseVOS.length">
					<view class="listBox">
						<scroll-view class="scroll-container" @scroll="(ev) => scrollEvent(ev,index)"  :scrollLeft="(scrollData[index] * 130)" scroll-with-animation :scroll-x="true">
						<div class="list-container">
							<view class="listItem" :style="{ '--bgColor': 'linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(240, 240, 240, 1) 100%), rgba(255, 255, 255, 1);' }" :id="it.id" v-for="(it, idx) in item.solutionByTypeListResponseVOS" :key="idx"
								@click.stop="onSchemeListItemClick(it, item.name)">
								<div class="content">
									<span class="content-text">{{it.name	}}</span>
									<div class="rightNewBox new" v-if="it.newSol && it.hotSol">新
										<div class="hot" v-if="it.hotSol">热</div>
									</div>
									<div class="rightNewBox new" v-if="it.newSol || it.hotSol">{{ it.newSol == 1?'新':'热' }}
									</div>
									<image class="bg-g" src="../../static/detail/bg-G.png"></image>
								</div>
							</view>
						</div>
						</scroll-view>


					</view>
				</div>

			</view>
		</view>

	</view>
</template>

<script>
import { querySolutionList } from '@/apis/product.js'
import noMsgBox from '@/components/noMsgBox.vue'
import { downloadBkPic } from '../../utils/util';

export default {
	components: {
		noMsgBox
	},
	data() {
		return {
			show: false,
			schemeMsg: [],
			scrollData: [],
			deviceInfo: {}
		};
	},
	onLoad(option) {
		this.getList()
		const deviceInfo = uni.getSystemInfoSync()
		this.deviceInfo = deviceInfo
	},
	onShow() {
		if (this.schemeMsg && this.schemeMsg.length) {
			this.skipToItem()
		} else {
			this.getListSync()
		}

	},
	methods: {
		downloadBkPic,
		scrollEvent(e,index) {
			setTimeout(() => {
				console.log('e.detail.scrollLeft: ', e.detail.scrollLeft);
				const currentIndex = Math.floor((e.detail.scrollLeft + 50) / 130)
				this.scrollData[index] = currentIndex
				console.log('currentIndex: ', currentIndex);
				this.$forceUpdate()
			},100)
		},
		changeIndex(index,type) {
			const msgLength = this.schemeMsg && this.schemeMsg[index].solutionByTypeListResponseVOS.length || 0
			if (type == 'next' && this.scrollData[index] + 3 >= msgLength) {
				return
			}
			const currentIndex = type == 'last'? this.scrollData[index] - 3 : this.scrollData[index] + 3
			this.scrollData[index] = currentIndex < 0?0:(currentIndex+1 > msgLength? msgLength-1  :currentIndex) 			
			this.$forceUpdate()
		},
		async getListSync() {
			await this.getList()
			this.initScrollIndex()
			this.skipToItem()
		},
		initScrollIndex() {
			const num = this.schemeMsg && this.schemeMsg.length || 0
			this.scrollData = Array.from(new Array(num).fill(0))
		},
		skipToItem() {
			if (uni.getStorageSync('indexToSchemeListName')) { // 首页点击榜单过来打开某一栏并锚点到目标位置
				setTimeout(() => {
					for (let [index, item] of this.schemeMsg.entries()) {
						item.show = false
						if (item.name == uni.getStorageSync('indexToSchemeListName')) {
							item.show = true
							uni.removeStorageSync('indexToSchemeListName')
							uni.createSelectorQuery().select('#scm' + (index + 1)).boundingClientRect(data => { //目标位置的节点：类class或者id
								uni.createSelectorQuery().select(".container").boundingClientRect(
									res => { //最外层盒子的节点：类class或者id
										uni.pageScrollTo({
											duration: 100, //过渡时间
											scrollTop: data.top - 180 - res.top, //到达距离顶部的top值,300这个值根据自己情况调

											// scrollTop:data.top - res.top,//如果置顶
										})
									}).exec()
							}).exec();
						}
					}

				}, 150)
			}
		},
		getList() {
			return new Promise(resole => {
				querySolutionList().then(res => {
					if (res && res.code == '00000000') {
						for (let item of res.data) {
							item.show = false

							if (item.name == '加工制造') { // 制造行业
								item.img = '../../static/detail/zhizao.png'
								item.imgName = 'zhizao'
								item.topImg = '../../static/detail/zhizao-top.png'
								item.arrowImg = '../../static/detail/qita-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(242, 222, 245, 1) 89.93%);'
								item.txtColor = '#D49FE3'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '城市建设') { // 城市建设
								item.img = '../../static/detail/jianshe.png'
								item.topImg = '../../static/detail/jianshe-top.png'
								item.imgName = 'jianshe'
								item.arrowImg = '../../static/detail/jianshe-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(255, 247, 216, 1) 89.93%);'
								item.txtColor = '#FF95DD'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '交通运输') { // 交通运输
								item.img = '../../static/detail/yunshu.png'
								item.topImg = '../../static/detail/yunshu-top.png'
								item.imgName = 'yunshu'
								item.arrowImg = '../../static/detail/yunshu-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(220, 253, 226, 1) 89.93%);'
								item.txtColor = '#5CACEA'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '其他') { // 其他
								item.img = '../../static/detail/qita.png'
								item.topImg = '../../static/detail/qita-top.png'
								item.imgName = 'qita'
								item.arrowImg = '../../static/detail/qita-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(220, 253, 226, 1) 99.93%);'
								item.txtColor = '#22B9AB'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '商业销售') { //商业销售
								item.img = '../../static/detail/xiaoshou.png'
								item.topImg = '../../static/detail/xiaoshou-top.png'
								item.imgName = 'xiaoshou'
								item.arrowImg = '../../static/detail/xiaoshou-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(255, 247, 216, 1) 89.93%);'
								item.txtColor = '#FF9700'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '政务民生') { // 民生服务
								item.img = '../../static/detail/minsheng.png'
								item.topImg = '../../static/detail/minsheng-top.png'
								item.imgName = 'minsheng'
								item.arrowImg = '../../static/detail/minsheng-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 216, 1) 89.93%);'
								item.txtColor = '#FF9700'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '建筑工程') { // 建筑工程
								item.img = '../../static/detail/gongcheng.png'
								item.topImg = '../../static/detail/gongcheng-top.png'
								item.imgName = 'gongcheng'
								item.arrowImg = '../../static/detail/gongcheng-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(220, 238, 253, 1) 89.93%);'
								item.txtColor = '#5CACEA'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} else if (item.name == '专精特新') { // 专精特新
								item.img = '../../static/detail/texin.png'
								item.topImg = '../../static/detail/texin-top.png'
								item.imgName = 'texin'
								item.arrowImg = '../../static/detail/texin-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(220, 238, 253, 1) 89.93%);'
								item.txtColor = 'rgba(92, 172, 234, 1)'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							}  else if (item.name == '企业经营') { // 专精特新
								item.img = '../../static/detail/yunying.png'
								item.topImg = '../../static/detail/yunying-top.png'
								item.imgName = 'yunying'
								item.arrowImg = '../../static/detail/yunying-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(220, 238, 253, 1) 89.93%);'
								item.txtColor = 'rgba(92, 172, 234, 1)'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							} 
							else {
								item.img = '../../static/detail/qita.png'
								item.topImg = '../../static/detail/qita-top.png'
								item.imgName = 'qita'
								item.arrowImg = '../../static/detail/qita-arrow.png'
								item.listBgColor = 'linear-gradient(153.43deg, rgba(255, 255, 255, 1) 0%, rgba(220, 253, 226, 1) 99.93%);'
								item.txtColor = '#22B9AB'
								item.arrowIconL = '../../static/detail/B-L.png'
								item.arrowIconR = '../../static/detail/B-R.png'
							}
						}
						this.schemeMsg = res.data
						resole()
					}
				})
			})

		},
		onSchemeItemClick(val) {
			val.show = !val.show
		},
		onSchemeListItemClick(val, name) {
			if(val.name == '数字化转型解决方案'){
				uni.navigateTo({
					url: `/pages/product/productLongImg?pageImg=zjgckzx`
				})
				return
			}
			if (!uni.getStorageSync('token')) {
				uni.setStorageSync('needLogin', true)
				uni.switchTab({
					url: '/pages/index/index'
				})
				return
			}
			uni.navigateTo({
				url: `/pages/scheme/schemeDetail?id=${val.id}&name=${name}&pic=${val.topImg}`
			})
			// if(val.posterId && val.posterId.length){
			// 	uni.setStorageSync('longImgUrl',val.posterId[0])
			// 	uni.navigateTo({
			// 		url:`/pages/message/systemMessageDetail?title=${val.name}`
			// 	})
			// }else{
			// 	uni.navigateTo({
			// 		url:`/pages/scheme/schemeDetail?id=${val.id}&name=${name}`
			// 	})
			// }

		},
	}
}
</script>

<style lang="scss">
.container {
	padding: 0 20rpx 30rpx;

	.schemeItem {
		margin-bottom: 120rpx;
		.schemeBox {
			height: 300rpx;
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;
			border: 1rpx solid #F2F6FC;
			border-bottom: 0;
			z-index: 100;
			.arrow-dot {
				display: flex;
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				background: #fff;
				border-radius: 25rpx;
				font-size: 24rpx;
				padding: 8rpx 14rpx;
				image {
					width: 30rpx;
					top: 5rpx;
					position: relative;
					margin: 0 8rpx;
					height: 30rpx;
				}
			}
			.title {
				font-size: 36rpx;
				padding-left: 20rpx;
				padding-top: 30rpx;

				.title-img {
						width: 325rpx;
						height: 88rpx;
					}

				.openCloseBtn {
					width: 130rpx;
					border-radius: 30rpx;
					position: relative;
					line-height: 36rpx;
					color: #fff;
					height: 36rpx;
					padding-left: 12rpx;
					box-sizing: border-box;
					font-size: 20rpx;
					background: var(--txt-color);
					.arrow {
						height: 28rpx;
						width: 28rpx;
						position: absolute;
						right: 5rpx;
						top: 4rpx;
					}
				}
			}

			&>image {
				position: absolute;
				right: 0;
				top: 0;
				height: 300rpx;
				z-index: -1;
				width: 370rpx;
			}
		}

		.listBox {
			// width: 90%;
			position: absolute;
			left: 0;
			top: 188rpx;
			z-index: 999;
			width: 100%;

			margin: 0 auto;
			box-sizing: border-box;
			padding: 14rpx 0;
			border-radius: 0px 0px 20rpx 20rpx;

			.scroll-container {
				width: 100%;
				white-space: normal;
			}
			.list-container {
				display: flex;
				width: max-content;
				padding-right: 80rpx;
			}

			.listItem {
				padding: 12rpx 20rpx;
				display: inline-block;
				align-items: center;
				box-sizing: border-box;
				width: 210rpx;
				height: 180rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
				background: var(--bg-color);
				// box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
				position: relative;
				.content {
					white-space: normal;
					font-size: 26rpx;
					.content-text {
						position: relative;
						line-height: 1.4;
						z-index: 99;
						display: inline-block;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.bg-g {
						position: absolute;
						right: 10rpx;
						bottom: 14rpx;
						width: 60rpx;
						height: 52rpx;
					}
				}
			}
		}
	}
}

.noBox {
	position: relative;
	height: 30rpx;
	z-index: 200;
	width: 92%;
	margin: 0 auto;
	background-color: #fafafa;
}

.rightNewBox {
	font-size: 24rpx;
	letter-spacing: 0px;
	width: 50rpx;
	height: 36rpx;
	color: #fff;
	display: inline-block;
	line-height: 36rpx;
	font-size: 26rpx;
	font-weight: bold;
	border-radius: 0rpx 100rpx 100rpx 0rpx;
	border: 1rpx solid #FF6161;
	position: absolute;
	left: 0;
	bottom: 20rpx;
	background: linear-gradient(90deg, rgba(255, 154, 154, 1) 0%, rgba(255, 97, 97, 1) 100%);	vertical-align: top;
	display: flex;
	width: max-content;
	z-index: 99;
	padding-left: 12rpx;
	align-items: center;
	padding-right: 20rpx;
	.hot {
		margin-left: 20rpx;
    border-left: 6rpx solid #fff;
    padding-left: 14rpx;
    height: 32rpx;
	}
}
</style>
